<script lang="ts" setup>
import { ref } from 'vue'
import { getGradesApi, getMyBookListAPi, selectBookApi } from '@/services/api'
import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp/hooks'
import { onLoad, onShow } from '@dcloudio/uni-app'
import storageApi from '@/utils/storage'
import { addBook } from '@/components/addBook'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const showPopup = ref(false)
const bookList = ref([])
onLoad(() => {
  getMyBookList()
})
const getMyBookList = async () => {
  const data = await getMyBookListAPi()
  if (data.code === 200) {
    bookList.value = data.data.bindBookList

    console.log(data.data.bindBookList)
  }
}
const selcetBook = async (item) => {
  if (item.useStatus !== 1) {
    const data = await selectBookApi({ bookId: item.bookId })
    if (data.code === 200) {
      userStore.setBookId(item.bookId)
      userStore.setMyUseBook(item)
      getMyBookList()
      uni.showToast({ title: '教材切换成功', icon: 'none' })
    }
  }
}
const closeAddBook = () => {
  console.log('关闭回调')
  showPopup.value = false
}
const confirm = () => {
  console.log('确定回调')
  showPopup.value = false
  getMyBookList()
}
//将时间戳转为日期的函数
const formatTimestampToDate = (timestamp) => {
  // 确保timestamp是毫秒单位
  const date = new Date(timestamp * 1000)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  return `${year}/${month}/${day}`
}
</script>
<template>
  <view class="contain">
    <view class="top_title"> 已绑定教材 </view>
    <view class="book_box">
      <view
        class="book_line"
        v-for="(item, index) in bookList"
        :key="index"
        @tap="selcetBook(item)"
      >
        <view class="book_img">
          <image :src="item.bookUrl" mode="aspectFill" />
        </view>
        <view class="book_center">
          <view class="title"> {{ item.bookName }} </view>
          <view class="text">
            {{ formatTimestampToDate(item.activeTime) }}激活
          </view>
        </view>
        <view class="book_status" v-if="item.useStatus == 1"> 使用中 </view>
      </view>
    </view>
    <view class="btn_box">
      <TnButton
        type="primary"
        width="250rpx"
        height="60rpx"
        bg-color="#5155E6"
        font-size="36rpx"
        text-color="#fff"
        @tap="showPopup = true"
        ><TnIcon name="add" color="#fff" size="40" /> 新增绑定</TnButton
      >
    </view>
  </view>
  <addBook v-if="showPopup" @close="closeAddBook" @confirm="confirm"></addBook>
</template>
<style lang="scss" scoped>
.contain {
  .top_title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    width: 100%;
    margin: 20rpx 10px 30rpx;
  }
  .book_box {
    width: 100%;
    background: #fff;
    .book_line {
      padding: 10rpx 20rpx;
      border-bottom: 2rpx solid #cecece;
      display: flex;
      position: relative;
      .book_img {
        width: 100rpx;
        height: 180rpx;
        margin-right: 20rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .book_center {
        flex: 1;
        // height: 180rpx;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-evenly;
        .title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
          margin: 20rpx 0 30rpx;
        }
        .text {
          font-size: 24rpx;
          color: #6c6c6c;
        }
      }
      .book_status {
        position: absolute;
        top: 30rpx;
        right: 30rpx;
        width: 100rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        background: #88cf65;
        color: #fff;
        font-size: 24rpx;
        border-radius: 10rpx;
      }
    }
  }
  .btn_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
  }
}
</style>
